<template>
  <div class="app-container">
    <button @click="printHTML">打印HTML</button>
    <div id="printBox" style="display:flex;color:#333;">
      <el-table :data="tableData" style="width: 981px" border :span-method="objectSpanMethod" size="mini"
                :header-cell-style="{ textAlign: 'center' }">
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <span style="font-size: 20px;font-family: 仿宋;">产褥期保健操作评分表（产妇）</span>
            <el-button style="float: right;" size="mini" icon="el-icon-circle-check" type="success" round>提交</el-button>
          </template>
          <el-table-column prop="project" align="center" label="项目" width="135"></el-table-column>
          <el-table-column prop="step" align="center" label="步骤" width="180"></el-table-column>
          <el-table-column prop="content" label="具体内容" width="500"></el-table-column>
          <el-table-column align="center" label="分值" width="105">
            <template slot-scope="scope">
              <el-input-number v-if="scores[scope.$index] !== undefined && scores[scope.$index] !== null"  controls-position="right"
                               style="width: 84px" :min="0" v-model="scores[scope.$index].value"/>
            </template>
          </el-table-column>
          <el-table-column label="得分" width="105">
            <template slot-scope="scope">
              <el-input-number v-if="scores[scope.$index] !== undefined && scores[scope.$index] !== null"  controls-position="right"
                               style="width: 84px" :min="0" :max="scores[scope.$index].value" v-model="scores[scope.$index].score"/>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {readJson} from "@/api/file";
import {strExtract} from "@/utils/zzDouUtils/ObjUtil";

export default {
  name: "Notice",
  methods: {
    printHTML() {
      let userAgent = navigator.userAgent;
      console.log(userAgent)
      print({
        printable: 'printBox',
        type: 'pdf',
        scanStyles: false,
        targetStyles: ['*'], // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
      })
    },
    merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的
      this.project_merageArr = [];
      this.project_meragePos = 0;
      this.step_merageArr = [];
      this.step_meragePos = 0;
    },
    // 合并多列专用
    merage() {
      this.merageInit(); // 前文的初始化数据函数
      for (let i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          this.project_merageArr.push(1);
          this.project_meragePos = 0;
          this.step_merageArr.push(1);
          this.step_meragePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.paragraph_meragePos 是 this.typeNameArr序号
          // 第一列
          if (this.tableData[i].project === this.tableData[i - 1].project) {
            this.project_merageArr[this.project_meragePos] += 1;
            this.project_merageArr.push(0);
          } else {
            this.project_merageArr.push(1);
            this.project_meragePos = i;
          }
          // 第二列
          if (this.tableData[i].step === this.tableData[i - 1].step && this.tableData[i].project === this.tableData[i - 1].project) {
            this.step_merageArr[this.step_meragePos] += 1;
            this.step_merageArr.push(0);
          } else {
            this.step_merageArr.push(1);
            this.step_meragePos = i;
          }
        }
      }
    },
    //合并列的方法
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      //合并最后一行 合计
      if (rowIndex === this.tableData.length - 1) {
        return [1, 4];
      }
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.project_merageArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {rowspan: row1, colspan: col1};
      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.step_merageArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {rowspan: row2, colspan: col2};
      }
    },
  },
  data() {
    return {
      scores: [
        {value:1,score:0},
        {value:1,score:0},
        {value:4,score:0},
        {value:4,score:0},
        {value:1,score:0},
        {value:3,score:0},
        {value:1,score:0},
        {value:1,score:0},
        {value:3,score:0},
        {value:4,score:0},
        {value:2,score:0},
        {value:7,score:0},
        {value:3,score:0},
        {value:6,score:0},
        {value:1,score:0},
        {value:1,score:0},
        {value:1,score:0},
        {value:2,score:0},
        {value:4,score:0},
        {value:10,score:0}],
      project_merageArr: [],  //第一列进行合并操作时存放的数组变量
      project_meragePos: 0,  //上面的数组的下标值
      step_merageArr: [],  //第二列进行合并操作时存放的数组变量
      step_meragePos: 0, //上面的数组的下标值
      tableData: [],
    };
  },
  created() {
    //读取json文件-孕妇
    readJson('puerpera').then(response => {
      this.tableData = response.data
      this.merage()
    });
  },
  watch: {
    scores: {
      handler(n,o){
        var s = 0;
        this.scores.forEach(val => {
          if (val) s += val.score
        })
        this.tableData[this.tableData.length - 1].step = s;
      },
      deep: true,//深度监听
    }
  }
};
</script>
<style>
.el-table .cell {
  white-space: pre-line;
}
</style>
